import { useIntersectionObserver } from '@vueuse/core'

const directivePlugins = {
  install(app) {
    // 注册图片懒加载
    app.directive('img-lazy', {
      // el: 指令绑定的DOM元素
      // binding: binding.value 指令后面的值
      mounted(el, binding) {
        // 判断img标签有没有进入视口
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 进入可视区
              el.src = binding.value
              // 停止监听
              stop()
            }
          }
        )
      }
    })
  }
}

export default directivePlugins